<template>
    <el-tooltip
        class="box-item"
        effect="dark"
        :content="tooltipContent"
        :disabled="iStooltipDisabled"
        placement="top"
    >
        <a :href="convertMaterialUrl(material)" @click.stop="downClick" >
            <el-button :disabled="disabled" :class="downloadClass" v-if="props.showText">{{ text }}</el-button>
            <slot></slot>
        </a>
    </el-tooltip>
</template>
<script setup>
/**
 * props 
 *  material  object //素材信息  {
 *                                   ispType 文件类型 qiNiu 七牛
 *                                    materialUrl 文件下载地址
 *                                    materialFullName 文件名称
 *                                   }
 *   tooltipContent?  String   //tooltip 内容
 *    text?  String   //文本
 *   tooltipDisabled?  Boolean  // 是否显示tooltip
 *    disabled?  Boolean  // 是否禁用
 *  downloadClass?  Srting    组件样式    
 * 
 *   emit
 * 
 *   on-click          点击触发的事件
 */
import { computed } from 'vue';
const props = defineProps({
    material: {
        type: Object,
        required: true
    },
    tooltipContent: {
        type: String,
        default: '如点击下载无反应，请点击右键另存为'
    },
    text: {
        type: String,
        default: '下载'
    },
    tooltipDisabled: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    downloadClass: {
        type: String,
        default: 'srt-el-button srt-el-button--link srt-el-button-h36'
    },
    showText: {
        type: Boolean,
        default: true
    }
});

const emit = defineEmits(['on-click']);

const iStooltipDisabled = computed(() => {
    if (!props.disabled && !props.tooltipDisabled) {
        return false;
    }
    return true;
});

// 七牛 url 拼 attname=filename   阿里 url 拼 response-content-type=application/octet-stream
/**
 *
 * @param ispType 文件类型 qiNiu 七牛
 * @param materialUrl 文件下载地址
 * @param materialFullName 文件名称
 * @returns {string}
 */
function convertMaterialUrl({ materialUrl, materialFullName = '', ispType }) {
    if (props.disabled) {
        return false;
    }
    if (ispType !== 'oss') {
        return `${materialUrl}?attname=${materialFullName}`;
    }
    return `${materialUrl}?response-content-type=application/octet-stream&&attname=${materialFullName}`;
}

// 点击下载事件
function downClick() {
    if (props.disabled) return;
    emit('on-click', true);
}
</script>

<style scoped></style>
